<!-- 普通模式演示(vue) -->
<template>
	<view class="content">
		<z-paging :auto="false" ref="paging" v-model="dataList" @query="queryList">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<z-tabs :list="tabList" @change="tabChange" />
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item,index)">
				<view class="item-title">{{item.title}}</view>
				<view class="item-detail">{{item.detail}}</view>
				<view class="item-line"></view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import requestUtils from '@/common/utils/requestUtils.js'
	import commonConstants from '@/common/constants/commonConstants.js'
	export default {
		data() {
			return {
				data: {
					param: {},
					url: '',
					isPager: false,
					fuzzyList: [],
				},
				dataList: [],
				showSelectItem: true,

				tabList: ['测试1'],
				tabIndex: 0,
			}
		},
		methods: {
			tabChange(index) {
				this.tabIndex = index;
				// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			queryList(pageNo, pageSize) {

				// let list = [{
				// 	name: "ZH党群工作",
				// 	text: "ZH党群工作",
				// 	value: "ZH-DQGZ"
				// }, {
				// 	name: "ZH党群工作",
				// 	text: "ZH党群工作",
				// 	value: "ZH-DQGZ"
				// }]
				// const view = this.$refs.paging
				// console.log(view, "----222-----!!!!!");
				// console.log(this, "---222--", this.$refs);
				// console.log(this.$refs.paging, "222--------");
				// setTimeout((a) => {
				// 	const view = this.$refs.paging
				// 	console.log(view, "---------!!!!!");
				// 	console.log(this, "-----", this.$refs);
				// 	this.$refs.paging.complete(list);
				// }, 1)
				
				let that = this
				requestUtils.getListByCondition(this.data.url, this.data.param, (result) => {
					let list = result.list
					that.$refs.paging.complete(result.list);
				}, (error) => {
					that.$refs.paging.complete(false);
				})
			},
			itemClick(item, index) {
				console.log('点击了', item.title);
			}
		},
		onLoad(lodata) {
			console.log("onLoad---",JSON.stringify(lodata));
			this.data.url= lodata.ul;
			this.data.isPager =lodata.ip;
			this.data.param =JSON.parse(lodata.pa)
		},
		mounted() {
			this.$nextTick(() => {
				this.queryList(0, 10)
			})
		},
		onHide() {
			uni.$off("requestData")
		}



	}
</script>

<style>
	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>